import React, { useEffect, useState } from "react";
import {rolePost} from '../../api/user'
import MenuTree from "./components/MenuTree";
import {
  Form,
  Input,
  Button,
} from "antd";

const RoleManager = () => {
  const handleFinish = (values)=>{
    console.log(values);
    rolePost(values)
  }
  return (
    <>
      <Form
        labelCol={{
          span: 4,
        }}
        wrapperCol={{
          span: 18,
        }}
        layout="horizontal"
        onFinish={handleFinish}
      >
        <Form.Item
          label="角色名称"
          name="rolename"
          rules={[{ required: true,message:"请输入角色名称"}]}
        >
          <Input/>
        </Form.Item>
        <Form.Item
          label="角色代号"
          name="rolecode"
          rules={[{ required: true,message:"请输入角色代号"}]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="菜单权限"
          name="menulist"
        >
          <MenuTree />
        </Form.Item>
        
        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Button type="primary" htmlType="submit">
            确认
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};

export default RoleManager;
